<template>
  <section  id="guide" class=" relative  px-8 bg-white text-gray-800 flex items-center">
    <div class="max-w-3xl mx-auto w-full z-10">
      <!-- 标题 -->
      <h2 class="text-3xl font-bold mb-8 text-center">🚀 快速开始</h2>

      <!-- 安装 -->
      <div class="mb-10">
        <h3 class="text-xl font-semibold mb-3">📦 安装</h3>
        <div class="bg-gray-900 text-green-400 font-mono text-sm p-4 rounded-md overflow-x-auto">
          <code>npm install easy-sound</code>
        </div>
      </div>

      <!-- 使用 -->
      <div>
        <h3 class="text-xl font-semibold mb-3">🔧 使用</h3>
        <div class="bg-gray-900 text-sm text-white font-mono p-4 rounded-md leading-relaxed overflow-x-auto">
          <code>
            <span class="text-blue-400">import</span> Sound <span class="text-blue-400">from</span> <span class="text-yellow-400">'easy-sound'</span>;
            <br><br>
            <span class="text-green-400">// 播放音效</span>
            <br>
            Sound.play(<span class="text-yellow-400">'Pulse'</span>);
            <br><br>
            <span class="text-green-400">// 停止播放</span>
            <br>
            Sound.stop();
          </code>
        </div>
      </div>
    </div>
    <img  data-scroll data-scroll-speed="3"  class="absolute top-2/5 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1/2 z-20" src="@/assets/imgs/1.png" alt="">
    <img  data-scroll data-scroll-speed="1"  class="absolute top-2/3 -translate-x-1/2 -translate-y-1/2" src="@/assets/imgs/2.png" alt="">
  </section>
</template>

<script setup>

</script>
<style>
#guide{
  border-top: 60px solid #ecf1fd;
  min-height: 100vh;
}</style>